<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="头像Size大小">
                <el-select v-model="propJson.avatarSize">
                    <el-option label="大号" value="large" />
                    <el-option label="默认" value="default" />
                    <el-option label="小号" value="small" />
                </el-select>
            </el-form-item>

            <el-form-item label="头像形状">
                <el-select v-model="propJson.avatarShape">
                    <el-option label="圆形" value="circle" />
                    <el-option label="方形" value="square" />
                </el-select>
            </el-form-item>

            <el-form-item label="头像填充类型">
                <el-select v-model="propJson.avatarFit">
                    <el-option label="自动填充" value="fill" />
                    <el-option label="自适应" value="contain" />
                    <el-option label="自放大" value="cover" />
                    <el-option label="自缩小" value="scale-down" />
                    <el-option label="无操作" value="none" />
                </el-select>
            </el-form-item>

            <el-divider>头像地址获取</el-divider>

            <CommonThirdServiceValue :actionInfo="propJson.avatarUrlInfo ? propJson.avatarUrlInfo : {}" :commonParam="commonParam" />

            <el-form-item label="菜单弹出位置" >
                <el-select v-model="propJson.placement" placeholder="菜单弹出位置" style="width: 100%">
                    <el-option label="上方" value="top" />
                    <el-option label="上方起始处" value="top-start" />
                    <el-option label="上方结束处" value="top-end" />
                    <el-option label="下方" value="bottom" />
                    <el-option label="下方起始处" value="bottom-start" />
                    <el-option label="下方结束处" value="bottom-end" />
                </el-select>
            </el-form-item>

            <el-form-item label="下拉触发行为" >
                <el-select v-model="propJson.trigger" placeholder="下拉触发行为" style="width: 100%">
                    <el-option label="鼠标悬浮下拉" value="hover" />
                    <el-option label="鼠标点击下拉" value="click" />
                </el-select>
            </el-form-item>

            <el-form-item label="是否点击选项后隐藏菜单">
                <el-radio-group v-model="propJson.hideOnClick">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-divider>下拉列表元素</el-divider>

            <div style="display: flex; justify-content: center; align-items: center">
                <el-button type="primary" size="small" @click="addItemInfo()">添加下拉列表元素</el-button>
            </div>

            <el-form label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="index" v-for="(item, index) in propJson.dropDownValueList">
                        <template #title>
                            <div class="collapseTitle">
                                <span>{{item.value}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteItemInfo(index)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="编码">
                            <el-input v-model="item.command" style="width: 100%"/>
                        </el-form-item>
                        <el-form-item label="选项名称">
                            <el-input v-model="item.value" style="width: 100%"/>
                        </el-form-item>
                        <el-form-item label="是否禁用">
                            <el-radio-group v-model="item.dropDownDisable">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否添加点击行为">
                            <el-radio-group v-model="item.isAddClickAction">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-divider v-if="item.isAddClickAction">下拉元素点击行为</el-divider>

                        <div v-if="item.isAddClickAction" style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                            <el-button type="primary" class="addCollapse" size="small" @click="addClickAction(item)">添加点击行为</el-button>
                        </div>

                        <CommonThirdServiceAction v-if="item.isAddClickAction" :actionList="item.clickAction" :commonParam="commonParam"/>

                    </el-collapse-item>
                </el-collapse>
            </el-form>
        </el-form>
    </div>
</template>

<script setup lang="ts" name="AvatarDropDownDrawer">
import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode.ts";
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue.vue";
import CommonThirdServiceAction from "@/components/lowcode/service/CommonThirdServiceAction.vue";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

function addItemInfo() {
    propJson.value.dropDownValueList.push(
        {
            command: "", value: "", dropDownDisable: false, isAddClickAction: false,
            clickAction: [{isAsyncAction: false}]
        }
    )
}

function deleteItemInfo(index) {
    // 删除数组中的数据
    propJson.value.dropDownValueList.splice(index, 1);
}

function addClickAction(item) {
    let variableInfo = {variableName: "", variableValue: "", type: "variable", variableType: "String", variableParamName: "", apiMethod: "GET", responseType: "default", apiType: "MSOA", apiPath: "",
        isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
    item.clickAction.push(variableInfo)
}
</script>

<style scoped lang="less">

</style>